<style lang="scss" scope>
.quality {
    width: 100%;
    display: flex;
    &>div {
        flex: 1;
        
        .qualityPic {
            height: auto;
            background: #ffffff;
            border-radius: 10px;
            padding: 30px;
            padding-bottom: 20px;
            box-shadow: 0 0 10px 0 #cfcfcf;
        }
        .pic-item {
            text-align: center;
        }
        .pic-items {
            float: left;
            text-align: center;
        }
    }
    &>div+div {
        margin-left: 30px;
    }
}

.quality-table {
    margin-top: 20px;
}
.quality-title {
            margin: 0 auto 20px;
            font-size: 18px;
            color: #666;
            text-align: center;
            font-weight: 600;
        }
</style>
<template>
    <div>
        <div class='quality'>
            <div v-if="picLeftList1.length!=0">
                <div class="quality-title">{{picLeftTitle1}}</div>
                <div class='qualityPic' v-model="picLeftList1">
                    <div class="pic-item" v-for="(item,index) in picLeftList1" :key="index" @click="mouseCoverLeft(index)">
                        <img :src="imgUrl+item.fileName" height="450" width="500">
                    </div>
                </div>
            </div>
            <div v-if="picRightList2.length!=0">
                <div class="quality-title">{{picRightTitle2}}</div>
                <div class='qualityPic' v-model="picRightList2" style="overflow:hidden;">
                    <div class="pic-item" v-for="(item,index) in picRightList2" :key="index" @click="mouseCoverRight(index)">
                        <img :src="imgUrl+item.fileName" height="450" width="500">
                    </div>
                </div>
            </div>
        </div>
        <div class='quality' style="margin-top:20px;">
            <div v-if="picLeftList3.length!=0">
                <div class="quality-title">{{picLeftTitle3}}</div>
                <div class='qualityPic' v-model="picLeftList3">
                    <div class="pic-item" v-for="(item,index) in picLeftList3" :key="index" @click="mouseCoverLeft(index)">
                        <img :src="imgUrl+item.fileName" height="450" width="500">
                    </div>
                </div>
            </div>
            <div v-if="picRightList4.length!=0">
                <div class="quality-title">{{picRightTitle4}}</div>
                <div class='qualityPic' v-model="picRightList4" style="overflow:hidden;">
                    <div class="pic-item" v-for="(item,index) in picRightList4" :key="index" @click="mouseCoverRight(index)">
                        <img :src="imgUrl+item.fileName" height="450" width="500">
                    </div>
                </div>
            </div>
        </div>
        <div class="quality-table" v-if='tableListFirst.length!=0'>
            <div class="quality-title">{{tableTitleFirst}}</div>
            <div style="box-shadow: 0 0 10px 0 #cfcfcf;border-radius:10px;overflow: hidden;">
            <el-table :data="tableListFirst" border default-expand-al="true" height="300">
                <el-table-column prop="fieldname" label="项目名称"></el-table-column>
                <el-table-column prop="description" label="描述"></el-table-column>
                <el-table-column prop="zd_1" label="数值"></el-table-column>
            </el-table>
            </div>
        </div>
        <div class="quality-table" v-if='tableListSecond.length!=0'>
            <div class="quality-title">{{tableTitleSecond}}</div>
            <div style="box-shadow: 0 0 10px 0 #cfcfcf;border-radius:10px;overflow: hidden;">
            <el-table :data="tableListSecond" border default-expand-al="true" height="300">
                <el-table-column prop="fieldname" label="项目名称"></el-table-column>
                <el-table-column prop="description" label="描述"></el-table-column>
                <el-table-column prop="zd_1" label="数值"></el-table-column>
            </el-table>
            </div>
        </div>
    </div>
</template>
<script>
// 引入任务管理方法
import {
    task
} from 'api/index.js'
// 全局图片路径
import { imgUrl } from '@/common/js/Base.js'
export default {
    name: "note",
    data() {
        return {
            imgUrl: imgUrl.imgurl,   // 图片路径前缀
            noteShow: true,
            picLeftList1: [],
            picLeftTitle1: null,
            picRightList2: [],
            picRightTitle2: null,
            picLeftList3: [],
            picLeftTitle3: null,
            picRightList4: [],
            picRightTitle4: null,
            tableListFirst: [],
            tableTitleFirst: null,
            tableListSecond: [],
            tableTitleSecond: null,
        }
    },
    // 实例创建时
    created() {
        this.getJobProgressInfoById();
    },
    watch: {

    },
    methods: {
        mouseCoverLeft() {

        },
        mouseCoverRight() {

        },
        getJobProgressInfoById() {
            let obj = {
                jobId: this.$store.state.jobid, //'4726604a708345d7ae2fa96afab162a1'
                analysisStep: "22"
            }
            // console.log(obj); 
            task.getTaskInfoById(obj).then((data) => {
                // console.log(JSON.stringify(data));
                if (data.returnCode == 0 || data.returnCode == 200) {
                    if(data.data!=null){
                        let obj = data.data.jobProcessDataList;
                    if (obj.length == 0) {
                        this.noteShow = false;
                    }
                    else {
                        M.each(obj, (item, index) => {
                            if (item.tableType == '5') {
                                this.picLeftTitle1 = item.tableName;
                                this.picLeftList1 = item.files;
                            } else if (item.tableType == '6') {
                                this.picRightTitle2 = item.tableName;
                                this.picRightList2 = item.files;
                            } else if (item.tableType == '7') {
                                this.picLeftTitle3 = item.tableName;
                                this.picLeftList3 = item.files;
                            } else if (item.tableType == '8') {
                                this.picRightTitle4 = item.tableName;
                                this.picRightList4 = item.files;
                            } else if (item.tableType == '1') {
                                if (index == 0) {
                                    this.tableListFirst = item.files[0].jsonData.data;
                                    this.tableTitleFirst = item.files[0].displayName;
                                } else if (index == 2) {

                                    this.tableListSecond = item.files[0].jsonData.data;
                                    this.tableTitleSecond = item.files[0].displayName;
                                }
                            }
                        })
                    }
                    }else{
                        this.noteShow = false;
                    }
                    
                } else if (data.returnCode == 422 || data.returnCode == 204) {
                    this.$router.push('/login')
                } else {
                    this.$Message.error(data.msg)
                }
            })
        },
    }
}

</script>